<template>
  <div class="center">
    <div class="up">
      <div
        class="bg-color-black item"
        v-for="item in titleItem"
        :key="item.title"
      >
        <p class="ml-3 colorBlue fw-b">{{ item.title }}</p>
        <div v-if="item.title !== '调度策略'">
          <dv-digital-flop class="dv-dig-flop ml-1 mt-1 pl-3" :config="item.config" />
        </div>
        <div v-else class="strategy-selector">
          <el-select
              v-model="selectedStrategy"
              placeholder="选择策略"
              @change="onStrategyChange"
              size="default"
          >
            <el-option
                v-for="strategy in strategies"
                :key="strategy.value"
                :label="strategy.label"
                :value="strategy.value"
                :disabled="strategy.isLoading"
            >
              <template #default>
                <div class="optionsItem">
                <span>{{ strategy.label }}</span>
                  <el-icon v-if="strategy.isLoading" class="is-loading" style="margin-left: auto;">
                    <Loading />
                  </el-icon>
                </div>
              </template>
            </el-option>
          </el-select>
        </div>
        <div>
        </div>
      </div>
    </div>
    <div class="down">
      <div class="ranking bg-color-black">
        <span>
          <i class="iconfont icon-tongji2"></i>
        </span>
<!--        <span class="fs-xl text mx-2 mb-1">年度负责人组件达标榜</span>-->
<!--        <dv-scroll-ranking-board class="dv-scr-rank-board" :config="ranking" />-->
        <chartEnv />
      </div>
    </div>
  </div>
</template>

<script>
import {defineComponent, reactive, onMounted, ref, watch} from 'vue'
import {computed} from 'vue'
import ChartEnv from '../bottomRight/chart/index'
import {useStore} from "vuex";
import {useWebSocketStore} from "@/store/websocket";
import { Loading} from '@element-plus/icons-vue';
export default defineComponent({
  components: {
    ChartEnv,
    Loading
  },
  setup() {
    // 下层数据
    // 2. 初始化Vuex Store
    const store = useStore()
    const wsStore = useWebSocketStore()
    const totalConsumption = computed(() => wsStore.totalConsumption) // 总用电量
    // 3. 从Vuex获取策略数据（全局状态）
    const strategies = computed(() => store.getters.allStrategies) // 策略列表
    const selectedStrategy = computed({
      get: () => store.getters.currentStrategy, // 获取当前选中策略
      set: (val) => val // 支持v-model双向绑定
    })
    const resultShow = computed(() => ({
      totalPower : wsStore.cdata[selectedStrategy.value].totalSolarPower + wsStore.cdata[selectedStrategy.value].totalBatteryPower
          +wsStore.cdata[selectedStrategy.value].totalGridPower + wsStore.cdata[selectedStrategy.value].totalWindPower,
      totalCost: wsStore.cdata[selectedStrategy.value].electricityCost.reduce((sum, cost) => sum + cost, 0),
      totalEmission: wsStore.cdata[selectedStrategy.value].totalEmission,
    }))
    const titleItem = computed(() => {
      const data = resultShow.value;
      return [
        {
          title: '总发电量(kwh)',
          config: {
            number: [data.totalPower], // 使用实时数据
            toFixed: 1,
            textAlign: 'left',
            content: '{nt}',
            style: {fontSize: 26}
          }
        },
        {
          title: '用电量(kwh)',
          config: {
            number: [totalConsumption.value], // 使用实时数据
            toFixed: 1,
            textAlign: 'left',
            content: '{nt}',
            style: {fontSize: 26}
          }
        },
        {
          title: '调度策略', // 策略选择项无需数字配置
          config: {}
        },
        {
          title: '总运行成本(元)',
          config: {
            number: [data.totalCost], // 使用实时数据
            toFixed: 1,
            textAlign: 'left',
            content: '{nt}',
            style: {fontSize: 26}
          }
        },
        {
          title: '总碳排放量(kg)',
          config: {
            number: [data.totalEmission], // 使用实时数据
            toFixed: 1,
            textAlign: 'left',
            content: '{nt}',
            style: {fontSize: 26}
          }
        },
      ];
    })
    // 5. 策略选择变化事件
    const onStrategyChange = (newStrategy) => {
      console.log('选择策略：', newStrategy)
      // 提交到Vuex更新全局状态
      store.dispatch('updateStrategy', newStrategy)
    }


    // 初始化数据
    // onMounted(() => {
    //   // fetchRateData()   //获取电池数据并展示
    // })

    // 设置数据

    return {
      strategies,
      titleItem,
      selectedStrategy,
      onStrategyChange
    }
  }
})
</script>

<style lang="scss" scoped>
.center {
  display: flex;
  flex-direction: column;
  .up {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    .item {
      border-radius: 6px;
      padding-top: 8px;
      margin-top: 8px;
      width: 19%;
      height: 70px;
      .dv-dig-flop {
        width: 150px;
        height: 30px;
      }
      .strategy-selector {
        margin: 5px 0 0 10px;
        width: calc(100% - 20px);
        .el-select {
          width: 100%;
          height: 100%;
          font-size: 18px !important;
          .el-input {
            .el-input__inner {
              background-color: transparent !important;
              border-color: #409eff;
              color: #fff;
              height: 36px;
              line-height: 36px;
              font-size: 26px;
            }
          }
        }
      }
    }
  }
  .down {
    padding: 6px 4px;
    padding-bottom: 0;
    width: 100%;
    display: flex;
    height: 340px;
    justify-content: space-between;
    .bg-color-black {
      border-radius: 5px;
    }
    .ranking {
      padding: 10px;
      width: 100%;
      .dv-scr-rank-board {
        height: 220px;
      }
    }
    .percent {
      width: 40%;
      display: flex;
      flex-wrap: wrap;
      .item {
        width: 50%;
        height: 120px;
        span {
          margin-top: 8px;
          font-size: 14px;
          display: flex;
          justify-content: center;
        }
      }
      .water {
        width: 100%;
        .dv-wa-le-po {
          height: 120px;
        }
      }
    }
  }
}
.icon{
  width: 14px;
  height: 14px;
  margin-left:15px
}
.optionsItem{
  display: flex;
  justify-content: space-around; /* 左右两端对齐 */
  align-items: center; /* 垂直居中 */
}
.spin {
  display: inline-block;
  transform-origin: center center;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

</style>
